/*
 * © 2010 Autodata Solutions Company. All Rights Reserved
 * This source code is the confidential and proprietary information of Autodata Solutions Company.
 * The user shall not, in whole or in part, copy, publish, disclose or make any use of this source code
 * without the prior written consent of Autodata Solutions Company.
 */
Ext.ns('net.autodata.compare');
(function (){
	var DQ = Ext.DomQuery;
	
	/**
	 * This view class defined how the InventoryPanel is rendered
	 * @class InventoryView
	 * @extends net.autodata.AbstractView
	 * @namespace net.autodata.compare
	 */
	var View = Ext.extend(net.autodata.AbstractView, {
		
		/**
		 * @property infoPanels
		 * @type net.autodata.compare.InventoryInfoPanel
		 */
		infoPanels: undefined,
		
		/**
		 * @property panelWidths
		 * @type Object
		 */
		panelWidths: {			
			baseVehicleWidth: 335,
			competitorWidth: 146
		},
		
		constructor: function ()
		{
			this.addEvents({
				'infoclick': true
			});
			
			View.superclass.ctor.apply(this, arguments);
		},
		
		/**
		 * @method init
		 */
		init: function ()
		{
			View.superclass.init.apply(this, arguments);
			
			var panel = this.component;
			
			var store = panel.getStore();
			store.on({
				'load': this.refresh,
				scope: this
			});
			
			panel.on('destroy', this.onDestroy, this);
		},
		
		/**
		 * @method initTemplates
		 */
		initTemplates: function ()
		{
			var ts = this.templates || {};
			
			if (!ts.mainTpl) {
				ts.mainTpl = new Ext.Template(
					'<div class="inventory-header"><h5>' + ASC.message('net.autodata.compare.inventory.label.inventory') + '</h5></div>',
					'<div class="inventory-body">',
						'<table border="0" cellpadding="0" cellspacing="0">',
							'<tr>',
								'<td class="record first basevehicle" style="width:{baseVehicleWidth}px;"><div class="basevehicle-wrap"></div></td>',
								'<td class="record competitor1" style="width:{competitorWidth}px;"><div class="competitor1-wrap"></div></td>',
								'<td class="record competitor2" style="width:{competitorWidth}px;"><div class="competitor2-wrap"></div></td>',
								'<td class="record last competitor3" style="width:{competitorWidth}px;"><div class="competitor3-wrap"></div></td>',
							'</tr>',
						'</table>',
					'</div>',
					{
						compiled: true,
						disableFormats: true
					}
				);
			}
			
			this.templates = ts;
		},
		
		/**
		 * @method render
		 */
		render: function ()
		{
			var panel = this.component;
			this.templates.mainTpl.overwrite(panel.el.dom, this.panelWidths);
			
			var ips = [];
			
			for (var i=0; i<4; i++) {
				var selector = String.format('.competitor{0}-wrap', i);
				if (i === 0) {
					selector = '.basevehicle-wrap';
				}
				ips.push(new net.autodata.compare.InventoryInfoPanel({
					renderTo: DQ.selectNode(selector, panel.el.dom),
					handler: function (panel, e) {
						this.fireEvent('infoclick', panel, e);
					},
					scope: this
				}));
			}
			
			this.infoPanels = ips;
		},
		
		/**
		 * @method refresh
		 */
		refresh: function ()
		{	
			this.component.getStore().each(function (record, index) {
				 this.infoPanels[index].setInventoryRecord(!record.phantom ? record.data : undefined);
			 }, this);
		},
		
		/**
		 * @method onDestroy
		 * @private
		 */
		onDestroy: function ()
		{
			var panel = this.component;
			panel.getStore().un('load', this.render, this);
			panel.un('destroy', this.onDestroy, this)
		}
	});
	
	net.autodata.compare.InventoryView = View;	
})();